<template>
	<view class="spreader-info" v-if="isSpreader === true">
		<!-- 个人信息区域 -->
		
		
		<view class="sp_info_bg">
		</view>
		<view class="sp_info_content">
			<view class="user_info_box">
				<image class="avatar" :src="userInfo.spreaderLogo ? userInfo.spreaderLogo : require('@/hl/logo/logo.png')"
					mode="aspectFill"></image>
				<view class="user_name_box">
					<text>{{ userInfo.spreaderName || '未设置昵称' }}</text>
					<text>{{ userInfo.spreaderIntr || '暂无介绍' }}</text>
				</view>
				<view class="user_fans_box">
					<text>{{ userInfo.spreaderFansNum || 0 }}</text>
					<text>粉丝数</text>
				</view>
			</view>
			
			<view class="sp_tab_box">
				<view class="tab_title">推广工具</view>
				<view class="tab_item_box">
					<view class="item" @click="$navTo('/me/spreader/renwu/index')">
						<image src="@/static/images/index/sp_1.png" mode=""></image>
						<text>发布任务</text>
					</view>
					<view class="item" @click="$navTo('/me/spreader/orders/index')">
						<image src="@/static/images/index/sp_3.png" mode=""></image>
						<text>订单管理</text>
					</view>
					<view class="item"  @click="$navTo('/me/spreader/amount/index')">
						<image src="@/static/images/index/sp_3.png" mode=""></image>
						<text>推广钱包</text>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view v-else-if="isSpreader === false">
		<view v-if="spreaderState === 0">
			<view class="icon flex align-center justify-center">
				<u-icon name="info-circle-fill" color="#8B8FF0" size="100"></u-icon>
			</view>
			<view class="title">
				当前您还不是推广者
			</view>
			<view class="shuoming">
				成为推广者后，您将享有更多推广权益
			</view>
			<view class="list flex align-center justify-center">
				<view class="list-box">
					<view class="list-box-item">
						·<text style="margin-left: 10rpx;">您将通过该帐号发布推广任务；</text>
					</view>
					<view class="list-box-item">
						·<text style="margin-left: 10rpx;">您将通过完成任务，添加推广收益；</text>
					</view>
				</view>
			</view>
			<view class="submit flex align-center justify-center">
				<view class="submit-box flex align-center justify-center" @click="$navTo('/me/spreader/saveInfo')">
					立即申请
				</view>
			</view>
		</view>
		<view class="state-item" v-if="spreaderState === 1">
			<view class="icon flex align-center justify-center">
				<u-icon name="search" color="#8B8FF0" size="100"></u-icon>
			</view>
			<view class="title">
				已提交审核中
			</view>
			<view class="shuoming">
				成为推广者后，您将享有更多推广权益
			</view>
			<view class="list flex align-center justify-center">
				<view class="list-box">
					<view class="list-box-item">
						·<text style="margin-left: 10rpx;">您将通过该帐号发布推广任务；</text>
					</view>
					<view class="list-box-item">
						·<text style="margin-left: 10rpx;">您将通过完成任务，添加推广收益；</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="spreaderState === 3">
			<view class="icon flex align-center justify-center">
				<u-icon name="close" color="#8B8FF0" size="100"></u-icon>
			</view>
			<view class="title">
				审核失败
			</view>
			<view class="shuoming2" style="color: red;">
				{{userInfo.spreaderAutoRemark}}
			</view>
			<view class="submit flex align-center justify-center">
				<view class="submit-box flex align-center justify-center" @click="$navTo('/me/spreader/saveInfo')">
					重新提交申请
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				defaultLogo: '/static/default-avatar.png',
				currentTab: 'selected',
				// 是否是推广者 false 否 true 是
				isSpreader: false,
				// spreaderState  0 未提交 1 待审核 2 审核通过 3 审核失败
				spreaderState: 0,
				userInfo: {
					spreaderName: "",
					spreaderLogo: "",
					spreaderIntr: "",
					spreaderFansNum: 0,
					spreaderAutoRemark: null,
					spreaderState: null
				},
				spreaderAmount: 0,
				showForm: true
			}
		},
		onLoad() {},
		onShow() {
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.$u.api.userinfo().then(res => {
					if (res.code == 0 && res.data) {
						uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
						uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
						uni.setStorageSync('userName', res.data.userName)
						uni.setStorageSync('avatar', res.data.avatar)
						this.userName = res.data.userName
						this.userId = res.data.invitationCode
						this.avatar = res.data.avatar
						this.collectCount = res.collectCount
						this.likeCount = res.likeCount
					}
				})
				let data = {
					userId: uni.getStorageSync('userId')
				}
			} else {
				this.spreaderAmount = 0
			}
			this.getSpreaderInfo()
		},
		methods: {
			openReviewForm() {
				this.showForm = true
			},
			closeReviewForm() {
				this.showForm = false
			},
			submitReview() {
				// 提交审核逻辑
				console.log('提交审核', this.form)
				this.closeReviewForm()
				this.status = 1 // 设置为待审核状态
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getSpreaderInfo() {
				this.$Request.getT('/app/spreader/isSpreader').then(res => {
					if (res.code == 0) {
						this.isSpreader = res.data.isSpreader
						this.spreaderState = res.data.spreaderInfo.spreaderState
						this.userInfo = res.data.spreaderInfo
					}
				})
			},
			switchTab(tab) {
				this.currentTab = tab
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background:#F7F8FF
	}

	.user-view {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #E8F0FC 0%, #F8F8FA 100%);

		.all-btn {
			padding: 20rpx 0;
		}

		.img-all {
			width: 208rpx;
			height: 57rpx;
			margin-right: 20rpx;
		}

		.user-center {

			.vip-img {
				width: 36rpx;
				height: 30rpx;
			}

			.user-heard {
				// background: linear-gradient(180deg, #ECF2FC 0%, #FFFFFF 100%);

				.user-info {
					padding: 8rpx 0 12rpx 0;

					.num-img {
						width: 40rpx;
						height: 38rpx;
						margin-right: 8rpx;
					}
				}

				.vip-center {
					padding: 0 24rpx 0 20rpx;
					height: 66rpx;
					background: #FAFAFA;
					border-radius: 0rpx 0rpx 12rpx 12rpx;
				}
			}

			.jindou-heard {
				height: 90rpx;
				border-bottom: 1rpx solid #F8F8FA;
			}

			.jindou-num {
				height: 108rpx;

				view:last-child {
					width: 156rpx;
					height: 58rpx;
				}
			}

			.zjgk-heard {
				height: 100rpx;
			}

			.cygj-item {
				width: 25%;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 12rpx;
				}
			}

		}

		/deep/.u-mode-center-box {
			background-color: transparent;
		}

		.connection-view {
			width: 686rpx;

			.connert-view {
				height: 917rpx;
				background-image: url('http://duanjusaas.zyrkeji.cn/sqx_fast/file/uploadPath/2024/06/29/409a6ec5502bc3dc24a72a4c3b877d1a.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding-top: 354rpx;

				.connert-text {
					margin-top: 110rpx;
				}
			}

			.close-img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.icon {
		width: 100%;
		padding-top: 100rpx;
	}

	.title {
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
		font-weight: bold;
		font-size: 40rpx;
	}

	.shuoming {
		font-size: 16rpx;
		color: #333333;
		margin-top: 20rpx;
		text-align: center;
	}

	.shuoming2 {
		font-size: 28rpx;
		color: #333333;
		margin-top: 20rpx;
		text-align: center;
	}

	.list {
		width: 100%;
		// height: 100rpx;
		margin-top: 20rpx;

		.list-box {
			padding: 20rpx;
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
			background: #ffffff;

			.list-box-item {
				margin-top: 10rpx;
				font-size: 16rpx;
				color: #333333;
			}
		}
	}

	.tishi {
		width: 100%;
		text-align: center;
		color: #999999;
		margin-top: 40rpx;
		font-size: 18rpx;

		text {
			color: #8B8FF0;
		}
	}

	.submit {
		width: 100%;
		height: 88rpx;
		margin-top: 60rpx;

		.submit-box {
			width: 686rpx;
			height: 88rpx;
			border-radius: 16rpx;
			color: #ffffff;
			background-color: #8B8FF0;
		}
	}

	.footer-btn {
		margin-top: 40rpx;
	}

	.footer-btn .usermain-btn {
		color: #FFFFFF;
		background: linear-gradient(90deg, #ff7581, #f8a5af);
		text-align: center;
		width: 686rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		margin: 0 auto;
		border-radius: 40rpx;
	}

	.label_text {
		width: 170rpx;
	}

	.review-progress {
		padding: 20rpx;
	}

	.status-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.status-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	.review-button {
		padding: 10rpx 20rpx;
		background-color: #ff6b6b;
		color: #fff;
		border-radius: 5rpx;
		cursor: pointer;
	}


	.form-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-content {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		width: 80%;
	}

	.form-item {
		margin-bottom: 20rpx;
	}

	.form-item text {
		display: block;
		margin-bottom: 10rpx;
	}

	.form-item input,
	.form-item textarea {
		width: 100%;
		padding: 10rpx;
		border: 1rpx solid #ccc;
		border-radius: 5rpx;
	}

	.form-actions {
		display: flex;
		justify-content: space-between;
	}

	.form-actions button {
		padding: 10rpx 20rpx;
		background-color: #ff6b6b;
		color: #fff;
		border: none;
		border-radius: 5rpx;
		cursor: pointer;
	}

	.spreader-info {
		position: relative;
		.sp_info_bg{
			width: 750rpx;
			height: 200rpx;
			background: linear-gradient(90deg, #FD7885, #FAA7AF);
			position: absolute;
			left: 0;
			top: 0;
		}
		
		.sp_info_content{
			padding: 100rpx 30rpx 0 30rpx;
			position: relative;
			z-index: 2;
			
		}
		
		.user_info_box{
			width: 690rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
			.avatar{
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.user_name_box{
				display: flex;
				flex-direction: column;
				width: 360rpx;
				text{
					&:nth-child(1){
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
					&:nth-child(2){
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						padding-top: 16rpx;
					}
				}
			}
			
			.user_fans_box{
				display: flex;
				flex-direction: column;
				flex: 1;
				border-left: 1px solid #EDEDED;
				align-items: center;
				justify-content: center;
				text{
					&:nth-child(1){
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
					&:nth-child(2){
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						padding-top: 20rpx;
					}
				}
			}
		}
		
		
		.sp_tab_box{
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.tab_title{
				font-weight: bold;
				font-size: 28rpx;
				color: #1A1A1A;
				padding: 26rpx 0 0 16rpx;
			}
			.tab_item_box{
				padding: 26rpx 0 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 14rpx;
					}
					text{
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
		
		
		.bg-gradient {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 400rpx;
			background: linear-gradient(180deg, #ffd6d6 0%, #fff1f1 100%);
			z-index: 1;
		}

		.custom-nav {
			position: fixed;
			width: 100%;
			height: 44px;
			z-index: 10;
			display: flex;
			align-items: center;

			.nav-left {
				padding: 15rpx 30rpx;

				.nav-back {
					color: #333;
					font-size: 28rpx;
				}
			}

			.nav-title {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				padding-right: 90rpx; // 为了保持标题居中
			}
		}

		.profile-section {
			text-align: center;
			position: relative;
			z-index: 2;
			padding: 30rpx;
			background: linear-gradient(180deg, #ffd6d6 0%, #fff1f1 100%);

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 75rpx;
				border: 6rpx solid #fff;
				margin-bottom: 20rpx;
				background-color: #f5f5f5;
			}

			.user-info {
				align-items: center;
				margin-bottom: 15rpx;

				.username {
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.gender-tag {
					color: #2196F3;
					font-size: 24rpx;
				}
			}

			.bio {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 30rpx;
				line-height: 1.6;
			}

			.follow-stats {

				.stat-item {
					margin-right: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.num {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.label {
						font-size: 24rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}

		.tab-section {
			position: relative;
			z-index: 2;
			display: flex;
			background: #fff;
			border-bottom: 1rpx solid #eee;

			.tab-item {
				position: relative;
				margin-right: 40rpx;
				font-size: 28rpx;
				color: #666;

				&.active {
					color: #333;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 6rpx;
						background: #ff6b6b;
						border-radius: 3rpx;
					}
				}
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 960px) {
		.spreader-info {
			max-width: 960px;
			margin: 0 auto;
		}
	}

	/* #endif */
</style>